<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="camera_fixture.css">

  <title></title>
</head>

<body>
  <!-- Full-screen prompt for USB drive. -->

  <div id="prompt_usb" hidden class="panel_box text_shadow" style="height:100%;clear:both;text-align:center">
    <table class="font_status" style="margin:auto;height:100%;">
      <tr>
        <td class="test-vcenter-inner" style="text-align:center;">
          <div class="text">
            <span class="color_idle goofy-label-en">Please insert the USB stick to load test parameters</span>
            <span class="color_idle goofy-label-zh">请插入U盘读取测试参数</span>
          </div>
        </td>
      </tr>
    </table>
  </div><!-- Full-screen prompt for ethernet dongle. -->

  <div id="prompt_ethernet" hidden class="panel_box text_shadow" style="height:100%;clear:both;text-align:center">
    <table class="font_status" style="margin:auto;height:100%;">
      <tr>
        <td class="test-vcenter-inner" style="text-align:center;">
          <div class="text">
            <span class="color_idle goofy-label-en">Please insert ethernet dongle to load test parameters</span>
            <span class="color_idle goofy-label-zh">请插入网路介面卡读取测试参数</span>
          </div>
        </td>
      </tr>
    </table>
  </div><!-- Main Screen. -->

  <div id="main_screen" hidden>
    <div id="Title" class="title_box" style="height:5%;">
      <table class="text_shadow_white font_title" style="margin:auto;height:100%;">
        <tr>
          <td class="test-vcenter-inner">
            <div id="main_screen_title">
              <span class="goofy-label-en">Camera Performance Test and ALS Calibration</span>
              <span class="goofy-label-zh">相机效能与ALS校正</span>
            </div>
          </td>
        </tr>
      </table>
    </div><!-- Main Screen - Left Pane. -->

    <div id="menu" class="panel_box" style="height:75%;width:20%;float:left;">
      <!-- USB Status Panel -->

      <div id="usb_status_panel" hidden>
        <div class="panel_box text_shadow_small font_label" style="height:5%;padding-left:3%">
          <span class="goofy-label-en">USB Stick:</span>
          <span class="goofy-label-zh">测试参数U盘:</span>
        </div>

        <div id="usb_status" class="panel_bad" style="height:10%;text-align:center">
          <table class="font_input" style="margin:auto;height:100%;">
            <tr>
              <td class="test-vcenter-inner">
                <div id="usb_status_text">
                  <span class="goofy-label-en">UNLOADED</span>
                  <span class="goofy-label-zh">未载入</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div><!-- Serial Number Panel. -->

      <div id="sn_status_panel" hidden>
        <div class="panel_box text_shadow_small font_label" style="height:5%;padding-left:3%">
          <span class="goofy-label-en">Serial Number:</span><span class="goofy-label-zh">待测物序号:</span>
        </div>

        <div style="height:10%;text-align:center;">
          <input id="sn_input_box" class="input_box" disabled type="text" value="" required="" pattern="TEST_SN_NUMBER"
           onclick="OnSnInputBoxClick();" oninput="OnCheckButtonState();">
        </div>
      </div><!-- Fixture Status Panel. -->

      <div id="fixture_status_panel" hidden>
        <div id="fixture_label" class="panel_box text_shadow_small font_label" style="height:5%;padding-left:3%">
          <span class="goofy-label-en">Fixture:</span>
          <span class="goofy-label-zh">制具链接:</span>
        </div>

        <div id="fixture_status" class="panel_bad" style="height:10%;text-align:center">
          <table class="font_input" style="margin:auto;height:100%;">
            <tr>
              <td class="test-vcenter-inner">
                <div id="fixture_status_text">
                  <span class="goofy-label-en">UNAVAILABLE</span>
                  <span class="goofy-label-zh">未连接</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div id="menu_placeholder" style="height:15%"></div><!-- Start Test Button. -->

      <div style="height:20%;text-align:center">
        <button id="button_start_test" class="button black" type="button" onclick="OnButtonStartTestClick();" style="width:100%;height:97%;font-size:140%">
          <span class="goofy-label-en">Start Test</span>
          <span class="goofy-label-zh">开始测试</span>
        </button>
      </div><!-- Exit Test Button. -->

      <div style="height:20%;text-align:center">
        <button id="button_exit_test" class="button black" type="button" onclick="OnButtonExitTestClick();" style="width:100%;height:97%;font-size:140%">
          <span class="goofy-label-en">Exit Test</span>
          <span class="goofy-label-zh">离开测试</span>
        </button>
      </div>
    </div><!-- Main Screen - Right Pane. -->

    <div id="content" class="white" style="height:75%;width:80%;float:right;">
      <table style="margin:auto;height:100%;">
        <tr>
          <td style="vertical-align:middle">
            <div class="popup_img" style="">
              <img id="preview_image" hidden src="" alt="Preview Image">
              <img id="camera_image" class="original_img" hidden src="">
              <img id="analyzed_image" class="analyzed_img" hidden src="">
            </div>
          </td>
        </tr>
      </table>
    </div><!-- Main screen - Bottom Console. -->

    <div id="test_console" class="panel_box text_shadow" style="height:20%;clear:both;text-align:center">
      <table class="font_status" style="margin:auto;height:100%;">
        <tr>
          <td class="test-vcenter-inner" style="text-align:center;">
            <div class="progress">
              <div id="test_status" class="text">
                <span class="color_idle goofy-label-en">IDLE</span>
                <span class="color_idle goofy-label-zh">閒置中</span>
              </div>
              <div class="bar_holder">
                <div id="progress_bar" class="bar pgray stripes"></div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
</html>
